<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>推荐-沸点-掘金</title>
  <link rel="stylesheet" href="./css/zby/iconfont.css">
  <link rel="stylesheet" href="./css/zby/boiling.css">
  <link rel="stylesheet" href="./css/zby/reset.css">
</head>

<body>
  <!-- 1.导航栏 -->
  <div class="header">
    <div class="common clearfix">
      <!-- 导航选项 -->
      <div class="navbar">
        <!-- logo图片 -->
        <a href="" class="logo">
          <img src="./img/wmr/logo.png" alt="" class="logo-img">
        </a>
        <ul class="nav-ul clearfix">
          <li><a href="javascript:;">首页</a></li>
          <li><a href="javascript:;" class="boiling">沸点</a></li>
          <li><a href="javascript:;">话题</a></li>
          <li><a href="javascript:;">小册</a></li>
          <li><a href="javascript:;">活动</a></li>
          <li><a href="javascript:;" class="nth">有奖征文🎁</a></li>
        </ul>
      </div>
      <div class="header-right">
        <!-- 搜索 -->
        <div class="search">
          <form class="search-form">
            <input type="text" placeholder="搜索更新了" class="search-input">
            <img src="./img/wmr/sousuo.png" alt="">
          </form>
        </div>
        <!-- 发沸点 -->
        <div class="add-group">
          <button class="btn-group">发沸点</button>
          <div class="more">
            <span id="btn-span" class="aspan">▼</span>
            <ul style="display:none;" class="more-ul">
              <li><a href="javascript:;">发布沸点</a></li>
              <li><a href="javascript:;">分享链接</a></li>
            </ul>
          </div>
        </div>
        <!-- 登陆注册 -->
        <div class="register">
          <span><a href="javascript:;">登录 ·</a></span>
          <span><a href="javascript:;">注册</a></span>
        </div>
      </div>
    </div>
  </div>

  <!-- 2.主要部分 -->
  <div class="main">
    <div class="common clearfix">
      <!-- 推荐固定导航栏 左边 -->
      <div class="recommend">
        <ul class="rec-son1">
          <li id="rec" class="rec">推荐</li>
          <li>热门</li>
          <li class="attention">关注</li>
        </ul>
        <ul class="rec-son2">
          <li>开源推荐</li>
          <li>内推招聘</li>
          <li>掘金相亲</li>
          <li>上班摸鱼</li>
          <li>应用安利</li>
          <li>开发工具</li>
          <li>New咨询</li>
        </ul>
      </div>
      <!-- 发表 中间 -->
      <div class="publish">
        <!-- 发布框 -->
        <div class="publish-son1">
          <textarea id="point-add" class="textbox" name="point_area" placeholder="告诉你个小秘密，发沸点时添加话题会被更多小伙伴看见呦~"></textarea>
          <span class="num">1000</span>
          <!-- 矢量图标 -->
          <div class="icon">
            <span class="iconfont icon-xiaolian"> 表情</span>
            <span class="iconfont icon-tupian1"> 图片</span>
            <span class="iconfont icon-lianjie"> 链接</span>
            <span class="iconfont icon-huati"> 话题</span>
          </div>
          <div class="issue">
            <span>Ctrl or ⌘ + Enter</span>
            <button type="submit" class="issue-btn">发布</button>
          </div>
        </div>
        <!-- 发布内容 -->
        <div class="publis-nav">
          <!-- 类型一 -->
          <div class="user-content">
            <div class="userdata clearfix">
              <img src="./img/zby/touxian1.png" alt="">
              <div class="userintr-right">
                <div class="userintr">
                  <span>良许Linux</span><br>
                  <span>嵌入式Linux应用开发工程师 · 3分钟前</span>
                </div>
                <div class="atten">
                  <button>关注</button>&nbsp;&nbsp;&nbsp;
                  <span class="sc iconfont icon-gengduo1"></span>
                  <div class="frame">
                    <div class="shape"></div>
                    <p>举报</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 发布内容-文章 -->
            <div class="usernav">
              <span>遭遇到现实版的贼喊捉贼，这个傻逼微博号主抄袭我的文章，还反过头来说我抄袭，被我识破就把我拉黑，然后我居然被禁止评论3天，我也是醉了！！！真的是林子大了，什么鸟人都有！！有没大佬微博运营的，投诉他！</span>
              <!-- 图片部分 -->
              <div class="pictures">
                <img src="./img/zby/one-ct-1.png" alt="">
                <img src="./img/zby/one-ct-2.png" alt="">
                <img src="./img/zby/one-ct-3.png" alt="">
              </div>
            </div>
            <!-- 发布内容-赞，评论，分享 -->
            <div class="user-edit">
              <span class="iconfont icon-like user-edit-son1"> 赞</span>
              <span class="iconfont icon-pinglun user-edit-son2"> 2</span>
              <span class="iconfont icon-tubiaolunkuo- user-edit-son3"> 分享</span>
            </div>
          </div>

          <!-- 复制部分 -->
          <!-- 类型二 -->
          <div class="user-content">
            <div class="userdata clearfix">
              <img src="./img/zby/touxian2.png" alt="">
              <div class="userintr-right">
                <div class="userintr">
                  <span>一百一</span><br>
                  <span>12分钟前</span>
                </div>
                <div class="atten">
                  <button>关注</button>&nbsp;&nbsp;&nbsp;
                  <span class="sc iconfont icon-gengduo1"></span>
                  <div class="frame">
                      <div class="shape"></div>
                      <p>举报</p>
                    </div>
                </div>
              </div>
            </div>
            <!-- 发布内容-文章 -->
            <div class="usernav">
              <span>周一的拉花</span>
              <!-- 图片部分 -->
              <div class="pictures">
                <img class="big-img" src="./img/zby/two-1.png" alt="">
                <p>今日最佳</p>
              </div>
            </div>
            <!-- 发布内容-赞，评论，分享 -->
            <div class="user-edit">
              <span class="iconfont icon-like user-edit-son1"> 2</span>
              <span class="iconfont icon-pinglun user-edit-son2"> 2</span>
              <span class="iconfont icon-tubiaolunkuo- user-edit-son3"> 分享</span>
            </div>
          </div>

          <!-- 类型三 -->
          <div class="user-content">
            <div class="userdata clearfix">
              <img src="./img/zby/touxian3.png" alt="">
              <div class="userintr-right">
                <div class="userintr">
                  <span>Aka</span><br>
                  <span>保密 @ 树洞一下 · 39分钟前</span>
                </div>
                <div class="atten">
                  <button>关注</button>&nbsp;&nbsp;&nbsp;
                  <span class="sc iconfont icon-gengduo1"></span>
                  <div class="frame">
                      <div class="shape"></div>
                      <p>举报</p>
                    </div>
                </div>
              </div>
            </div>
            <!-- 发布内容-文章 -->
            <div class="usernav">
              <span>女孩子说跟你做朋友，那你是不是真的就没戏了？</span>
              <!-- 图片部分 -->
              <div class="pictures">
                <p>树洞一下</p>
              </div>
            </div>
            <!-- 发布内容-赞，评论，分享 -->
            <div class="user-edit">
              <span class="iconfont icon-like user-edit-son1"> 5</span>
              <span class="iconfont icon-pinglun user-edit-son2"> 30</span>
              <span class="iconfont icon-tubiaolunkuo- user-edit-son3"> 分享</span>
            </div>
          </div>

          <div class="user-content">
            <div class="userdata clearfix">
              <img src="./img/zby/touxian4.png" alt="">
              <div class="userintr-right">
                <div class="userintr">
                  <span>优秀的程序员</span><br>
                  <span>程序员 · 42分钟前</span>
                </div>
                <div class="atten">
                  <button>关注</button>&nbsp;&nbsp;&nbsp;
                  <span class="sc iconfont icon-gengduo1"></span>
                  <div class="frame">
                      <div class="shape"></div>
                      <p>举报</p>
                    </div>
                </div>
              </div>
            </div>
            <!-- 发布内容-文章 -->
            <div class="usernav">
              <span>作为IT行业的过来人，你有什么话想对后辈说的？</span>
              <!-- 图片部分 -->
              <div class="pictures">
              </div>
            </div>
            <!-- 发布内容-赞，评论，分享 -->
            <div class="user-edit">
              <span class="iconfont icon-like user-edit-son1"> 10</span>
              <span class="iconfont icon-pinglun user-edit-son2"> 46</span>
              <span class="iconfont icon-tubiaolunkuo- user-edit-son3"> 分享</span>
            </div>
          </div>

          <div class="user-content">
            <div class="userdata clearfix">
              <img src="./img/zby/touxian5.png" alt="">
              <div class="userintr-right">
                <div class="userintr">
                  <span>林肯林</span><br>
                  <span>45W大功率挖掘机PC200-8为您服务 · 1小时前</span>
                </div>
                <div class="atten">
                  <button>关注</button>&nbsp;&nbsp;&nbsp;
                  <span class="sc iconfont icon-gengduo1"></span>
                  <div class="frame">
                      <div class="shape"></div>
                      <p>举报</p>
                    </div>
                </div>
              </div>
            </div>
            <!-- 发布内容-文章 -->
            <div class="usernav">
              <span>？？？</span>
              <!-- 图片部分 -->
              <div class="pictures">
                <img class="big-img" src="./img/zby/three-1.png" alt="">
                <p>一图胜千言</p>
              </div>
            </div>
            <!-- 发布内容-赞，评论，分享 -->
            <div class="user-edit">
              <span class="iconfont icon-like user-edit-son1"> 12</span>
              <span class="iconfont icon-pinglun user-edit-son2"> 2</span>
              <span class="iconfont icon-tubiaolunkuo- user-edit-son3"> 分享</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 用户信息 右边-->
      <div class="userinfo">
        <div class="user">
          <div class="user-head">
            <img src="./img/zby/user-head.png" alt="">
            <span>fatshady</span>
          </div>
          <div class="user-attention clearfix">
            <ul>
              <li class="user-attention-son1">
                <div>沸点</div>
                <span>0</span>
              </li>
              <li class="user-attention-son2">
                <div>关注</div>
                <span>0</span>
              </li>
              <li>
                <div>关注者</div>
                <span>0</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="user-recommend">
          <div class="user-recommend-son">推荐沸点</div>
          <div class="recommend-more clearfix">
            <div class="recommend-more-son1">
              <div>不知道为何，大家都喜欢睡八小时，我一般4-5小时（算上午休1....</div>
              <span>7 赞 · 64 评论</span>
            </div>
            <div class="recommend-more-son2">
              <div class="left">
                <div>😓😥😂看到前辈写的代码，让我先去...</div>
                <span>22 赞 · 52 评论</span>
              </div>
              <img src="./img/zby/tjfd-1.png" alt="">
            </div>
            <div class="recommend-more-son3">
              <div class="left">
                <div>这几年用过的部分电子产品包装盒，...</div>
                <span>14 赞 · 57 评论</span>
              </div>
              <img src="./img/zby/tjfd-2.png" alt="">
            </div>
          </div>
        </div>
        <div class="user-how clearfix">
          <img src="./img/zby/how.svg" alt="">
          <span>如何玩转沸点</span>
        </div>
      </div>
    </div>
  </div>

  <script src="./lib/jqurey/jquery.min.js"></script>
  <script src="./js/zby/boiling.js"></script>
  <script src="./js/zby/iconfont.js"></script>
  <script src="./js/zby/zby_boiling.js"></script>
  <script src="./lib/template/template-web.js"></script>
  <!-- 引入模板 -->
  <%- include('../template/zby_boilingTemp.ejs')%>

  <script>
    document.querySelector('#btn-span').onclick = function () {
      if (document.querySelector('.more-ul').style.display == 'none') {
        document.querySelector('.more-ul').style.display = 'block';
      } else {
        document.querySelector('.more-ul').style.display = 'none';
      }
    }
  </script>
</body>

</html>